// 1. 是否登录
// 2. 设置跳转
// 3. 登录跳转
<template>
  <div>
    <header class="beijing">
      <div class="beijin"></div>
      <span class="user" v-if="isLogin">{{ phone }}</span>
      <span class="user" v-else @click="$router.push('/login')">立即登录</span>
    </header>

    <div>
      <!-- 两列单元格 -->
      <van-cell title="我的订单" is-link to="/order/orderList" />
      <van-cell title="收藏" is-link to="#" />
      <van-cell title="足迹" is-link to="#" />
      <van-cell title="优惠卷" is-link to="#" />
      <van-cell title="我的地址" is-link to="/address/list" />
      <van-cell title="设置" is-link to="/logout" />
    </div>

    <Footer />
  </div>
</template>

<script>
import Footer from "@components/Footer.vue";
import { mapState } from "vuex";
export default {
  name: "my",
  data() {
    return {};
  },
  components: {
    Footer,
  },
  computed: {
    ...mapState(["isLogin", "phone"]),
  },
};
</script>

<style scoped>
.beijing {
  position: relative;
}
.beijing .beijin {
  height: 175px;
  width: 100%;
  background: url(http://fresh.huruqing.cn/img/bg2.78d35cdc.png) no-repeat;
  background-size: 100%, 100%;
}
.beijing .user {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 16px;
}
</style>